<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情页</title>
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/detailed.css">
    <style>
        .swiper {
            position: relative;
            margin-top: 0.33rem;
            overflow: hidden;
        }

        .swiper-wrapper {
            width: 300%;
            display: flex;
        }

        .swiper img {
            display: block;
            width: 100%;
        }

        .swiper-slide {
            width: 80%;
            text-align: center;
            font-size: 18px;
            background: #fff;
        }

        .swiper-slide-active,
        .swiper-slide-duplicate-active {
            transform: scale(1);
        }

        .swiper-pagination-bullet {
            background-color: rgba(0, 0, 0, .3);
        }

        .swiper-pagination-bullet-active {
            background-color: #000;
        }

        .swiper-pagination1 {
            width: 15.2vw;
            height: 7.2vw;
            border-radius: 4vw;
            text-align: center;
            line-height: 7.2vw;
            position: absolute;
            bottom: 2.6667vw;
            left: 77vw;
            z-index: 9;
            background-color: rgba(0, 0, 0, .3);
            color: white;
        }
    </style>
</head>

<body>
    <header>
        <a href="./index.html">
            <i class="iconfont icon-zuojiantou"></i>
        </a>
        <p>商品详情页</p>
    </header>
    <div class="main">
        <!-- 轮播图 -->
        <div class="swiper">
            <div class="swiper-wrapper">
            </div>

            <div class="swiper-pagination"></div>
            <div class="swiper-pagination1 "></div>

            <!--分页器。如果放置在swiper外面，需要自定义样式。-->
        </div>

        <!-- 商品详情名称 -->
        <div class="classify-goods">
            <!-- <div class="money">
                <p><i>￥</i>1620.00</p>
                <p>已售7件</p>
            </div>
            <p>[郎酒旗舰店郎牌郎酒]郎酒 郎牌郎酒 普郎 53度酱香型白酒 500ml*6瓶 整箱装白酒普郎原箱</p>
        </div> -->
        </div>

        <!-- 保障 -->
        <div class="ensure">
            <div>
                <p><i class="iconfont icon-duihao"></i>七天无理由退货</p>
                <p><i class="iconfont icon-duihao"></i>48小时发货</p>
            </div>
            <a style="float:right"><i class="iconfont icon-arrow-right
                "></i></a>

        </div>

        <!-- 商品评价 -->
        <div class="appraise">
            <div class="appraise-top ">
                <!-- <p>商品评价</p>
                <p>查看更多<i class="iconfont icon-youjiantou"></i></p>-->
            </div>
            <div class="appraise-bottom">
                <!-- <div class="conten">
                    <div>
                        <img src="" alt="">
                        <p>股神不死</p>

                    </div>
                    <p>这酒太辣了</p>
                    <p>2023</p>
                </div>
            </div> -->
            </div>
        </div>
        <!-- 商品介绍 -->
        <div class="photo">

        </div>

</body>
<script src="./js/axios.js"></script>
<script src="./js/swiper.js"></script>
<script src="./js/detailed.js"></script>

</html>